<template>
    <view class="bigBox">

        <view class="infomation">

            <view class="infoTitle">
                <view class="tip"></view>
                <view>抽奖转盘使用说明：</view>
            </view>

            <view class="infoTextBox">
                <view class="infoText">
                    1.先选择中奖类型(开:中奖,关:未中奖),中奖将显示中奖表情,未中奖将显示遗憾表情。</br>
                    2.奖项项目最多10项,奖项名称最多10个字符。</br>
                    3.概率暂不能设置，如需开放概率设置请留言,目前每个奖项的中奖概率相等。</br>
                </view>
            </view>
            <view class="chouTitle" @click="testBtn">
                {{ lotteryTitle }}
            </view>
        </view>

        <LuckyWheel ref="myLucky" v-if="!isEdit" width="650rpx" height="650rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"
            @start="startCallBack" @end="endCallBack" />
        <view class="editBtn">
            <u-button type="success" :plain="true" :hairline="true" @click="editTable" :text="isEdit ? '保存配置' : '设置奖项'"></u-button>


        </view>
        <view class="tableBox" v-if="isEdit">
            <view style="padding:0 150rpx">            <u--input  maxlength="10" placeholder="抽奖标题" border="surround" v-model="lotteryTitle"></u--input>
</view>
            <view class="table">
                <view class="tableTitle">
                    <view class="thTitle1">中奖类型</view>
                    <view class="thTitle2">奖项名称</view>
                    <view class="thTitle2">中奖权重</view>
                </view>
                <view class="tableBody" v-for="(item,i) in tableList" :key="i">
                    <view class="thTitle1"><u-switch v-model="item.type" size="18" :activeValue="1" :inactiveValue="0"></u-switch></view>
                    <view class="thTitle2"><u--input maxlength="10"  placeholder="请输入奖项名称"  border="none" v-model="item.name"></u--input></view>
                    <view class="thTitle2"><u-number-box v-model="item.range" ></u-number-box></view>
                </view>
                <view class="tableBody">
                    <view class="thTitle2" style="width:50%"><u-icon @click="addItem" name="plus-circle" color="#2979ff" size="28"></u-icon></view>
                    <view class="thTitle2" style="width:50%"><u-icon @click="delItem" name="close-circle-fill" color="#2979ff" size="28"></u-icon></view>
                </view>
            </view>

        </view>

    </view>
</template>

<script>
let gaoxing = require("@/static/imgs/gaoxing.png");
let yihan = require("@/static/imgs/yihan.png");
let yesBg = "#ffefc0";
let noBg = "#f3f3f3";
import LuckyWheel from "../lucky-wheel/lucky-wheel";
export default {
  components: { LuckyWheel },
  data() {
    return {
      isEdit: false,
      tableList: [
        { type: 1, name: "" ,range:10},
        { type: 1, name: "" ,range:10},
      ],
      lotteryTitle: "幸运大抽奖",
      blocks: [
        {
          padding: "13px",
          background: "#ffbd06",
        },
      ],
      prizes: [
        {
          type: 1,
          fonts: [
            {
              text: "一元现金",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: yesBg,
          imgs: [{ src: gaoxing, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 0,
          fonts: [
            {
              text: "感谢参与",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: noBg,
          imgs: [{ src: yihan, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 1,
          fonts: [
            {
              text: "两元现金",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: yesBg,
          imgs: [{ src: gaoxing, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 0,
          fonts: [
            {
              text: "感谢参与",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: noBg,
          imgs: [{ src: yihan, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 1,
          fonts: [
            {
              text: "三元现金",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: yesBg,
          imgs: [{ src: gaoxing, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 0,
          fonts: [
            {
              text: "感谢参与",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: noBg,
          imgs: [{ src: yihan, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 1,
          fonts: [
            {
              text: "四元现金",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: yesBg,
          imgs: [{ src: gaoxing, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 0,
          fonts: [
            {
              text: "感谢参与",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: noBg,
          imgs: [{ src: yihan, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 1,
          fonts: [
            {
              text: "五元现金",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: yesBg,
          imgs: [{ src: gaoxing, width: "30px", height: "30px", top: 40 }],
        },
        {
          type: 0,
          fonts: [
            {
              text: "感谢参与",
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: 10,
          background: noBg,
          imgs: [{ src: yihan, width: "30px", height: "30px", top: 40 }],
        },
      ],
      buttons: [
        { radius: "50px", background: "#e42d2d" },
        { radius: "45px", background: "#e42d2d" },
        {
          radius: "40px",
          background: "#c8171a",
          pointer: true,
          fonts: [{ text: "开始\n抽奖", top: "-20px", fontColor: "#fcb61b" }],
        },
      ],
    };
  },

  methods: {
    editTable() {
      this.isEdit = !this.isEdit;
      if (this.isEdit == false) {
        this.initLottery();
      }
    },
    initLottery() {
      // let rangeee = this.tableList.length;
      let prizesdata = [];
      this.tableList.forEach((item) => {
        let obj = {
          type: item.type,
          fonts: [
            {
              text: item.name,
              top: "10%",
              fontSize: 12,
              fontColor: "#d16e71",
            },
          ],
          range: item.range,
          background: item.type == 1 ? yesBg : noBg,
          imgs: [
            {
              src: item.type == 1 ? gaoxing : yihan,
              width: "30px",
              height: "30px",
              top: 40,
            },
          ],
        };

        prizesdata.push(obj);
      });

      this.prizes = prizesdata;
      console.log(this.prizes,'最终配置');
    },
    addItem() {
      if (this.tableList.length < 10) {
        this.tableList.push({ type: 1, name: "",range:10 });
      }
    },
    delItem() {
      //删除数组最后一项
      if (this.tableList.length > 2) {
        this.tableList.pop();
      }
    },
    // 点击抽奖按钮触发回调
    startCallBack() {
      // 先开始旋转
      this.$refs.myLucky.play();
      // 使用定时器来模拟请求接口
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        // const index = 0
        // 调用stop停止旋转并传递中奖索引
        // this.$refs.myLucky.stop(index)
        this.$refs.myLucky.stop();
      }, 3000);
    },
    // 抽奖结束触发回调
    endCallBack(prize) {
      // 奖品详情
      console.log(prize);
      // if (prize.type == 1) {
      //   uni.showModal({
      //     title: "中奖结果",
      //     confirmText: "确定",
      //     content: "恭喜抽到" + prize.fonts[0].text,
      //     success: function (res) {
      //       if (res.confirm) {
      //         console.log("用户点击确定");
      //       } else if (res.cancel) {
      //         console.log("用户点击取消");
      //       }
      //     },
      //   });
      // } else {
      //   uni.showModal({
      //     title: "中奖结果",
      //     confirmText: "确定",
      //     content: "很遗憾未能中奖！",
      //     success: function (res) {
      //       if (res.confirm) {
      //       	console.log('用户点击确定');
      //       } else if (res.cancel) {
      //       	console.log('用户点击取消');
      //       }
      //     },
      //   });
      // }
    },
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
  height: 100vh;
}

.bigBox {
  height: 100vh;
  background: #7d2323;

  .chouTitle {
    text-align: center;
    font-size: 64rpx;
  }

  .infomation {
    padding: 26rpx 0rpx;

    color: #f3f3f3;

    .infoTitle {
      width: 100%;
      padding: 0 40rpx;
      font-size: 26rpx;
      font-weight: 500;
      display: flex;

      .tip {
        width: 6rpx;
        height: 22rpx;
        background: #f3f3f3;
        margin-top: 6rpx;
        margin-right: 28rpx;
      }
    }

    .infoTextBox {
      padding: 0 70rpx;

      .infoText {
        padding: 20rpx 0rpx;
        font-size: 24rpx;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }
    }
  }

  .editBtn {
    padding: 26rpx 150rpx;
    // background: #f3f3f3;
  }

  .tableBox {
    padding: 26rpx 50rpx;
    background: #f3f3f3;
    .table {
      margin-top: 15rpx;
      border-top: 2rpx solid #dfe2e5;
      border-left: 2rpx solid #dfe2e5;
      .tableTitle {
        //  padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        .thTitle1 {
          width: 25%;
          font-size: 28rpx;
          padding: 10rpx 0;
          text-align: center;
          border-right: 2rpx solid #dfe2e5;
          border-bottom: 2rpx solid #dfe2e5;
        }
        .thTitle2 {
          width: 37%;
          font-size: 28rpx;
          padding: 10rpx 0;
          text-align: center;
          border-right: 2rpx solid #dfe2e5;
          border-bottom: 2rpx solid #dfe2e5;
        }
      }
      .tableBody {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .thTitle1 {
          width: 25%;
          padding: 10rpx 0;
          display: flex;
          justify-content: center;
          text-align: center;
          border-right: 2rpx solid #dfe2e5;
          border-bottom: 2rpx solid #dfe2e5;
        }
        .thTitle2 {
          width: 37%;
          padding: 10rpx 0;
          text-align: center;
          display: flex;
          justify-content: center;
          border-right: 2rpx solid #dfe2e5;
          border-bottom: 2rpx solid #dfe2e5;
        }
      }
    }
  }
}
</style>